<template>
	<el-main>
		<el-tabs type="border-card">
			<el-tab-pane label="字典列表">
				<el-card shadow="never">
					<el-form @keyup.enter="getDictTypePageData">
						<el-row :gutter="12">
							<el-col :span="8">
								<el-form-item label="字典名称">
									<el-input placeholder="请输入字典名称" v-model="searchForm.name"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="类型编码">
									<el-input placeholder="请输入类型编码" v-model="searchForm.type"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-button icon="Search" type="primary" @click="getDictTypePageData">搜索</el-button>
								<el-button icon="RefreshLeft" @click="resetForm">重置</el-button>
							</el-col>
						</el-row>
					</el-form>
				</el-card>
				<el-card shadow="never" style="margin-top: 15px;width: 835px;">
					<el-button @click="dialogVisible = true" icon="Plus" type="primary"
						style="margin-bottom: 5px;">新增</el-button>
					<el-table :data="dictTypeList" border>
						<el-table-column type="selection"></el-table-column>
						<el-table-column label="字典类型名称" prop="name"></el-table-column>
						<el-table-column label="分类编码" width="250">
							<template #="{ row }">
								<el-text v-copy="row.type" type="primary">{{ row.type }}</el-text>
							</template>
						</el-table-column>
						<el-table-column label="字典描述" prop="remarks"></el-table-column>
						<el-table-column label="操作">
							<template #="{ row, $index }">
								<el-link @click="editDictType($index)" :underline="false" type="primary"
									icon="Edit">编辑</el-link>&nbsp
								<el-link @click="rmDictType(row.id)" :underline="false" type="danger"
									icon="Delete">删除</el-link>
							</template>
						</el-table-column>
					</el-table>
					<XlxPagination v-model:currentPage="searchForm.current" v-model:pageSize="searchForm.size"
						:total="totals" @update:currentPage="getDictTypePageData" @update:pageSize="updateSize">
					</XlxPagination>
				</el-card>
				<el-dialog v-model="dialogVisible">
					<el-form labelWidth="80">
						<el-form-item label="字典名称" requried>
							<el-input placeholder="请输入字典名称" v-model="dialogData.name"></el-input>
						</el-form-item>
						<el-form-item label="类型编码" requried>
							<el-input placeholder="请输入类型编码" v-model="dialogData.type"></el-input>
						</el-form-item>
						<el-form-item label="备注">
							<el-input type="textarea" placeholder="请输入备注" v-model="dialogData.remarks"></el-input>
						</el-form-item>
					</el-form>
					<template #footer>
						<el-button @click="dialogVisible = false">取消</el-button>
						<el-button type="primary" @click="postAOUDictTypeData">保存</el-button>
					</template>
				</el-dialog>
			</el-tab-pane>
			<el-tab-pane label="回收站"></el-tab-pane>
		</el-tabs>
	</el-main>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { getDictTypeDelApi, getDictTypePageApi, postAOUDictTypeApi } from '@renderer/api/dicts';
import { SearchDictTypeForm, DictTypeItem } from '@renderer/interface/dicts';

/* 搜索表单 */
const searchForm = ref<SearchDictTypeForm>({
	current: 1,
	size: 5,
	name: '',
	type: ''
})
const resetForm = () => {
	searchForm.value = {
		current: 1,
		size: 5,
		name: '',
		type: ''
	}
	getDictTypePageData()
}

/* 表格 */
const dictTypeList = ref<DictTypeItem[]>([])
const getDictTypePageData = async () => {
	const { code, data } = await getDictTypePageApi(searchForm.value)
	if (code !== '200') return

	dictTypeList.value = data.records
	totals.value = data.total
}
const totals = ref(0)
const updateSize = () => {
	searchForm.value.current = 1
	getDictTypePageData()
}
// 编辑按钮
const editDictType = (index: number) => {
	Object.assign(dialogData.value, dictTypeList.value[index])
	dialogVisible.value = true
}
// 删除按钮
const rmDictType = async (id: string) => {
	const { code } = await getDictTypeDelApi(id)
	if (code !== '200') return

	ElMessage.success('删除成功~')
	getDictTypePageData()
}

/* 对话框 */
const dialogVisible = ref(false)
const dialogData = ref<DictTypeItem>({
	name: '',
	type: '',
	remarks: ''
})
const postAOUDictTypeData = async () => {
	const { code } = await postAOUDictTypeApi(dialogData.value)
	if (code !== '200') return

	ElMessage.success(dialogData.value.id ? '修改成功~' : '添加成功~')
	dialogVisible.value = false
	getDictTypePageData()
}

onMounted(() => {
	getDictTypePageData()
})
watch(dialogVisible, () => {
	if (!dialogVisible.value) {
		dialogData.value = {
			name: '',
			type: '',
			remarks: ''
		}
	}
})
</script>

<style scoped></style>
